<template>
  <div class='ele-body'>
    <a-card :bordered='false'>
      <a-form ref='queryForm' layout='inline' :model='queryData'>
        <a-form-item label='搜索' name='title'>
          <a-input v-model:value='queryData.title' placeholder='资源标题'></a-input>
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button type='primary' @click='onQueryEvent'>查询</a-button>
            <a-button @click='onReset'>重置</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-card>

    <a-card :bordered='false' style='margin-top: 20px'>
      <ele-pro-table
        ref='table'
        row-key='id'
        :datasource='datasource'
        :columns='columns'
        :where='queryData'
        :scroll="{ x: 'max-content' }"
      >
        <template #toolbar>
          <a-space>
            <a-button type='primary' @click='visible = true'>新增资源</a-button>
<!--            <a-button>导出Excel</a-button>-->
          </a-space>
        </template>
        <template #image='{record}'>
          <img :src='record.cover' style='width: 50px;height: 50px;object-fit: cover;'>
        </template>
        <template #status='{record}'>
          <a-switch :checked='record.statusFlag == 1' @change='onSwitchChange($event, record)' />
        </template>
        <template #action='{record}'>
          <a-space>
            <a-button type='link' @click='onDelete(record)' v-if='record.canDel == 10'>删除</a-button>
            <a-button type='link' @click='getDetails(record)'>编辑详情</a-button>
          </a-space>
        </template>
      </ele-pro-table>
    </a-card>

    <a-modal v-model:visible='visible' title='资源信息' @ok='onConfirm' @cancel='onCancel' width="800px">
      <a-form :model='formData' :rules='formRules' ref='formData' :label-col="{ style: { width: '100px' } }"
              labelAlign='right'>
        <a-form-item label='封面' name='cover'>
          <MaterialList v-model:list='formData.cover' type='1' :count='1'></MaterialList>
        </a-form-item>
        <a-form-item label='标题' name='title'>
          <a-input v-model:value='formData.title' placeholder='请填写服务名称' maxlength='30' style='width: 300px'/>
        </a-form-item>

        <a-form-item label='可否删除' name='canDel'>
          <a-radio-group name="radioGroup" v-model:value="formData.canDel">
            <a-radio value="10">可删除</a-radio>
            <a-radio value="20">不可删除</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label='可用状态' name='statusFlag'>
          <a-switch v-model:checked='formData.statusFlag' />
        </a-form-item>
        <a-form-item label='备注' name='remark'>
          <a-textarea v-model:value='formData.remark' placeholder='备注' style='width: 300px'/>
        </a-form-item>
        <a-form-item label='内容' name='content'>
          <tinymce v-model="formData.content"></tinymce>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import MaterialList from '@/components/MaterialList';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { resources } from '@/api/resources';
import { Modal } from 'ant-design-vue';
import { createVNode } from 'vue';
import Tinymce from '@/components/TinymceEditor/index';
export default {
  components: {
    MaterialList,
    Tinymce
  },
  name: 'index',
  data() {
    return {
      visible: false,
      queryData: {
        title: ''
      },
      formData: {
        title: '',
        cover: [],
        canDel: '10', // 可否删除
        remark: '',
        content: '',
        statusFlag: true
      },
      formRules: {
        title: { required: true, message: '请填写资源名称', trigger: 'blur' },
        canDel: { required: true, message: '请选择资源可否删除', trigger: 'blur' },
        content: { required: true, message: '请填写资源内容', trigger: 'blur' },
        cover: { required: true, message: '请上传资源封面', trigger: 'change', type: 'array' }
      },
      datasource: '/business/admin/resources/findPage',
      columns: [
        {
          key: 'index',
          width: 48,
          title: '序号',
          align: 'center',
          customRender: ({ index }) => index + 1
        },
        {
          dataIndex: 'cover',
          title: '图片',
          align: 'center',
          slots: { customRender: 'image' }
        },
        {
          dataIndex: 'title',
          title: '标题',
          align: 'center'
        },
        {
          dataIndex: 'canDel',
          title: '可否删除',
          align: 'center',
          customRender: ({ record }) => record.canDel == 10 ? '可删除' : '不可删除'
        },
        {
          dataIndex: 'remark',
          title: '备注',
          align: 'center'
        },
        {
          dataIndex: 'statusFlag',
          title: '状态',
          align: 'center',
          slots: { customRender: 'status' }
        },
        {
          dataIndex: 'updateTime',
          title: '更新时间',
          align: 'center'
        },
        {
          title: '操作',
          key: 'action',
          width: 200,
          align: 'center',
          slots: { customRender: 'action' }
        }
      ]
    };
  },
  methods: {
    async getDetails(item) {
      const res = await resources.findDetail({ id: item.id });

      const entity = res.data.data;
      entity.statusFlag = entity.statusFlag == 1;
      entity.cover = entity.cover ? [entity.cover] : [];
      console.log('getDetails', entity);
      this.formData = entity;
      this.visible = true;
    },
    onDelete(item) {
      Modal.confirm({
        title: '提醒',
        content: '确定删除该资源吗?',
        icon: createVNode(ExclamationCircleOutlined),
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        centered: true,
        onOk: async () => {
          await resources.del(item);
          this.$message.success('操作成功');
          this.$refs.table.onRefresh();
        }
      });
    },
    async onSwitchChange(event, item) {
      item.statusFlag = event ? 1 : 2;
      await resources.edit(item);
      this.$message.success('操作成功');
      this.$refs.table.onRefresh();
    },
    onConfirm() {
      this.$refs.formData.validate().then(async () => {
        const formData = JSON.parse(JSON.stringify(this.formData));
        formData.cover = formData.cover.join('');
        formData.statusFlag = formData.statusFlag ? 1 : 2;
        const request = formData.id ? resources.edit : resources.add;
        await request(formData);
        this.$message.success('操作成功');
        this.$refs.table.onRefresh();
        this.$refs.formData.resetFields();
        this.visible = false;
      });
    },
    onQueryEvent() {
      this.$refs.table.reload({ page: 1 });
    },
    onReset() {
      this.$refs.queryForm.resetFields();
      this.$refs.table.reload({ page: 1 });
    },
    onCancel() {
      this.$refs.formData.resetFields();
      this.visible = false;
    }
  }
};
</script>

<style scoped>

</style>
